<template>
	<view class="resetpass bgf3f">
		<common-navbar title="忘记密码"></common-navbar>
		<view class="resetpass_wrapper">
			<view class="resetpass_pad">
				<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
					<view class="pad_30">
						<u-form-item label-width="140" :label-position="labelPosition" label="+86" prop="phone"
							:required='false'>
							<u-input :border="border" placeholder="请输入手机号" v-model="model.phone" type="number">
							</u-input>
						</u-form-item>

						<u-form-item label-width="140" :label-position="labelPosition" label="验证码" prop="code"
							:required='false'>
							<view class="flex align_center jus_content">
								<u-input :border="border" placeholder="请输入验证码" v-model="model.code" type="number">
								</u-input>
								<text @click="$u.throttle(getCode, 800)" class="tips"
									:style="{color: tips == '获取验证码' || tips == '重新获取' ? '#0078fb' : '#6e6e73'}">{{tips}}</text>
							</view>
						</u-form-item>

						<u-form-item label-width="140" :label-position="labelPosition" label="设置密码" prop="pass"
							:required='false'>
							<u-input :border="border" placeholder="请设置最少6位以上登录密码" v-model="model.pass" type="password">
							</u-input>
						</u-form-item>

						<u-form-item label-width="140" :label-position="labelPosition" label="确认密码" prop="repass"
							:required='false'>
							<u-input :border="border" placeholder="请重新输入密码" v-model="model.repass" type="password">
							</u-input>
						</u-form-item>
					</view>
				</u-form>
			</view>

			<view class="default_btn" @click="$u.throttle(resetPassword, 1000)">立即重置</view>
		</view>

		<u-toast ref="uToast"></u-toast>

		<u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange">
		</u-verification-code>

		<u-modal v-model="show" :content="content" :show-cancel-button='true' @confirm='confirmPass'
			confirm-text='立即重置'></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				content: '是否重置密码？',
				seconds: 60,
				tips: '发送验证码',
				model: {
					phone: '',
					code: '',
					pass: '',
					repass: ''
				},
				// 错误信息提示位置
				labelPosition: 'left',
				border: false,
				// 错误信息
				errorType: ['message'],
				// 效验规则
				rules: {
					// 联系电话
					phone: [{
							required: true,
							message: '请输入联系电话',
							trigger: 'blur',
						},
						{
							// 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
							validator: (rule, value, callback) => {
								// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
								return this.$u.test.mobile(value);
							},
							message: '联系电话格式错误',
							// 触发器可以同时用blur和change，二者之间用英文逗号隔开
							trigger: ['change', 'blur'],
						}
					],
					// 验证码
					code: [{
						required: true,
						message: '请输入验证码',
						trigger: 'blur'
					}],
					// 密码
					pass: [{
							required: true,
							message: '请设置最少6位以上登录密码',
							trigger: 'blur',
						},
						{
							// 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
							validator: (rule, value, callback) => {
								// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
								return value.length >= 6
							},
							message: '请设置最少6位以上登录密码',
							// 触发器可以同时用blur和change，二者之间用英文逗号隔开
							trigger: ['change', 'blur'],
						}
					],
					// 确认密码
					repass: [{
							required: true,
							message: '请重新输入密码',
						},
						{
							// 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
							validator: (rule, value, callback) => {
								// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
								return value == this.model.pass
							},
							message: '输入的密码不一致',
							// 触发器可以同时用blur和change，二者之间用英文逗号隔开
							trigger: ['change', 'blur'],
						}
					]
				}
			}
		},
		onLoad() {
			console.log(this.userInfo);
			this.model.phone = this.userInfo?this.userInfo.phone:'';
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			codeChange(text) {
				this.tips = text
			},
			verification() {
				if (this.model.phone == '') {
					this.$showToast('请输入手机号')
					return false
				}

				if (!this.$u.test.mobile(this.model.phone)) {
					this.$showToast('手机号格式错误，请重新输入')
					return false
				}

				return true
			},
			async getCode() {
				let verification = this.verification()

				if (!verification) return

				if (this.$refs.uCode.canGetCode) {
					// 请求验证码
					await this.$u.get(this.$restUrl.getRegisterCode, {
						phone: this.model.phone
					});
					// 通知验证码组件内部开始倒计时
					this.$refs.uCode.start()
				} else {
					this.$u.toast('倒计时结束后再发送')
				}
			},
			end() {
				// this.$u.toast('倒计时结束')
			},
			start() {
				this.$u.toast('验证码已发送')
			},
			resetPassword() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.show = true
					} else {
						console.log('验证失败')
					}
				})
			},
			async confirmPass() {
				const {
					data
				} = await this.$u.post(this.$restUrl.changePassword, {
					phone: this.model.phone,
					code: this.model.code,
					password: this.model.pass,
					confirm_password: this.model.repass
				})

				this.$showToast('重置密码成功')

				// this.model.phone = ''
				this.model.code = ''
				this.model.pass = ''
				this.model.repass = ''
			}
		}
	}
</script>

<style scoped lang="scss">
	@import "./resetpass.scss";
</style>
